import { useEffect, memo, useState } from 'react';
import { useParams } from 'react-router-dom';
import introduceHTML from 'bundle-text:../assets/introduce.html';
import Interception from '../components/Interception';
import { Button } from 'antd-mobile';

function Introduce_() {
  // alert(introduceHTML);
  const id = useParams<{ id: string }>().id;
  const [saved, setSaved] = useState(false);
  useEffect(() => {
    console.log(`id = ${id}`)
  }, []);
  return (
    <div>
      {!saved && (
        <Button onClick={() => setSaved(true)}>save</Button>
      )}
      {!saved && (
        <Interception />
      )}
      <h2>id: {id}</h2>
      <pre dangerouslySetInnerHTML={{ __html: introduceHTML }}></pre>
    </div>
  );
}
const Introduce = memo(Introduce_);

export default Introduce;
